// 历年年度销量对比
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"), "shine");
  var dataList = {
    category: ["精煤", "中煤", "煤泥"],
    lineData: ["2020年", "2021年", "2022年", "2023年", "2024年"],
    xdata: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    result: [
      [
        [110, 120, 90, 100, 105, 140, 130, 110, 120, 90, 100, 105],
        [700, 840, 710, 690, 590, 640, 720, 710, 690, 590, 640, 720],
        [310, 220, 290, 400, 405, 440, 330, 510, 620, 390, 400, 305],
      ],
      [
        [210, 220, 190, 200, 305, 140, 230, 210, 320, 190, 200, 305],
        [500, 640, 410, 390, 390, 240, 520, 410, 490, 290, 340, 420],
        [310, 220, 290, 400, 405, 440, 330, 510, 620, 390, 400, 505],
      ],
      [
        [310, 220, 190, 200, 305, 140, 230, 210, 320, 190, 200, 305],
        [700, 840, 710, 690, 590, 640, 720, 710, 690, 590, 640, 720],
        [310, 220, 290, 400, 405, 440, 330, 510, 620, 390, 400, 305],
      ],
      [
        [110, 120, 90, 100, 105, 140, 130, 110, 120, 90, 100, 105],
        [700, 840, 710, 690, 590, 640, 720, 710, 690, 590, 640, 720],
        [310, 220, 290, 400, 405, 440, 330, 510, 620, 390, 400, 305],
      ],
      [
        [210, 220, 190, 200, 305, 140, 0, 0, 0, 0, 0, 0],
        [500, 640, 410, 390, 390, 240, 0, 0, 0, 0, 0, 0],
        [310, 220, 290, 400, 405, 440, 0, 0, 0, 0, 0, 0],
      ],
    ],
  };
  option = {
    timeline: {
      data: dataList.lineData,
      axisType: "category",
      show: true,
      autoPlay: true,
      playInterval: 3000,
      left: "0%",
      right: "10%",
      botton: "0%",
      width: "100%",
      label: {
        normal: {
          textStyle: {
            color: "#ddd",
          },
        },
        emphasis: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      symbolSize: 10,
      lineStyle: {
        color: "#555",
      },
      checkpointStyle: {
        borderColor: "#888",
        borderWidth: 2,
      },
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        normal: {
          color: "#666",
          borderColor: "#666",
        },
        emphasis: {
          color: "#aaa",
          borderColor: "#aaa",
        },
      },
    },
    options: [],
  };
  dataList.lineData.forEach((item, index) => {
    option.options.push({
      backgroundColor: "rgba(0,0,0,0)",
      // title: {
      //   //text: "近七天产量趋势",
      //   // textStyle: {
      //   //   align: "center",
      //   //   color: "#fff",
      //   //   fontSize: 28,
      //   // },
      //   // top: "5%",
      //   // left: "center",
      // },
      grid: {
        // top: 80,
        // bottom: 100,
        // borderWidth: 0,
        top: "12%",
        left: "10%",
        right: "10%",
        bottom: "30%",
        // textStyle: {
        //   color: "#fff",
        // },
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        top: "0%",
        textStyle: {
          fontSize: 15,
          //fontFamily: "MicrosoftYaHeiUI",
          color: "#FFFFFF",
        },
      },
      xAxis: {
        name: "月份",
        data: dataList.xdata,
        axisLine: {
          show: true, //隐藏X轴轴线
          symbol: ["none", "arrow"],
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          fontSize: 15,
        },
      },
      //   [
      //   {
      //     type: "category",
      //     axisLine: {
      //       show: true, //隐藏X轴轴线
      //       symbol: ["none", "arrow"],
      //       lineStyle: {
      //         color: "#fff",
      //         width: 1,
      //       },
      //     },
      //     splitLine: {
      //       show: false,
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //     splitArea: {
      //       show: false,
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       color: "#fff",
      //       fontSize: 15,
      //     },
      //     data: dataList.xdata,
      //   },
      // ],
      yAxis: {
        type: "value",
        name: "单位：万吨",
        splitLine: {
          show: true,
        },
        axisLine: {
          show: true, //隐藏X轴轴线
          symbol: ["none", "arrow"],
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: "#fff",
          fontSize: 15,
          formatter: (params) => {
            return params + "";
          },
        },
        splitArea: {
          show: false,
        },
      },

      //   [
      //   {
      //     type: "value",
      //     splitLine: {
      //       show: true,
      //     },
      //     axisLine: {
      //       show: true, //隐藏X轴轴线
      //       symbol: ["none", "arrow"],
      //       lineStyle: {
      //         color: "#fff",
      //         width: 1,
      //       },
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       color: "#fff",
      //       fontSize: 15,
      //       formatter: (params) => {
      //         return params + "";
      //       },
      //     },
      //     splitArea: {
      //       show: false,
      //     },
      //   },
      // ],
      series: [
        {
          name: dataList.category[0],
          type: "line",
          symbolSize: 4,
          symbol: "circle",
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: "top",
                formatter: (params) => {
                  return params.value + "%";
                },
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
              color: "#00CC99",
              barBorderRadius: 0,
            },
          },
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00CC99", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#00CC99", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          data: dataList.result[index][0],
        },
        {
          name: dataList.category[1],
          type: "line",
          symbolSize: 4,
          symbol: "circle",
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: "top",
                formatter: (params) => {
                  return params.value + "%";
                },
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
              color: "#33CCFF",
              barBorderRadius: 0,
            },
          },
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#33CCFF", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#33CCFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          data: dataList.result[index][1],
        },
        {
          name: dataList.category[2],
          type: "line",
          symbolSize: 4,
          symbol: "circle",
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: "top",
                formatter: (params) => {
                  return params.value + "%";
                },
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
              color: "#9933FF",
              barBorderRadius: 0,
            },
          },
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#9933FF", // 0% 处的颜色
                  },

                  {
                    offset: 1,
                    color: "#9933FF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          data: dataList.result[index][2],
        },
      ],
    });
  });
  //   options: [

  //   ],
  // };

  myChart.setOption(option);

  //options && myChart.setOption(options);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();

// 历年年度度销量对比
// (function () {
//   // 基于准备好的dom，初始化echarts实例
//   var myChart2 = echarts.init(document.querySelector(".line .chart"), "shine");
//   var dataList2 = {
//     category: ["精煤", "中煤", "煤泥"],
//     xdata: ["2020", "2021", "2022", "2023", "2024"],
//     result: [
//       [210, 220, 290, 200, 205],
//       [700, 840, 710, 690, 590],
//       [400, 400, 400, 500, 400],
//     ],
//     colors: ["#00CC99", "#33CCFF", "#9933FF"],
//   };
//   option2 = {
//     backgroundColor: "rgba(0,0,0,0)",
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         type: "none",
//       },
//       position: function (point, params, dom, rect, size) {
//         // 提示框位置
//         let x = 0;
//         let y = 0;
//         //提示框定位
//         if (point[0] + size.contentSize[0] < size.viewSize[0]) {
//           x = point[0];
//         } else if (point[0] > size.contentSize[0]) {
//           x = point[0] - size.contentSize[0];
//         } else {
//           x = "30%";
//         }
//         if (point[1] > size.contentSize[1]) {
//           y = point[1] - size.contentSize[1];
//         } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
//           y = point[1];
//         } else {
//           y = "30%";
//         }
//         return [x, y];
//       },
//       formatter: (params) => {
//         return `
//             <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:8px;">${params[0].name}年</div>
//             <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[1]}：${params[1].value}</div>
//             <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[2]}：${params[2].value}</div>
//             <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[0]}：${params[0].value}</div>`;
//       },
//       extraCssText:
//         "opacity: 0.8;background-color:rgba(0,0,0,0.5);padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;",
//     },
//     title: {
//       //text: "近七天产量趋势",
//       textStyle: {
//         align: "center",
//         color: "#fff",
//         fontSize: 28,
//       },
//       top: "5%",
//       left: "center",
//     },
//     grid: {
//       borderWidth: 0,
//       top: "14%",
//       left: "10%",
//       right: "6%",
//       bottom: "10%",
//       textStyle: {
//         color: "#fff",
//       },
//     },
//     legend: {
//       top: "2%",
//       textStyle: {
//         fontSize: 15,
//         //fontFamily: "MicrosoftYaHeiUI",
//         color: "#FFFFFF",
//       },
//     },
//     xAxis: [
//       {
//         type: "category",
//         axisLine: {
//           show: true, //隐藏X轴轴线
//           symbol: ["none", "arrow"],
//           lineStyle: {
//             color: "#fff",
//             width: 1,
//           },
//         },
//         splitLine: {
//           show: false,
//         },
//         axisTick: {
//           show: false,
//         },
//         splitArea: {
//           show: false,
//         },
//         axisLabel: {
//           interval: 0,
//           color: "#fff",
//           fontSize: 15,
//         },
//         data: dataList2.xdata,
//       },
//     ],
//     yAxis: [
//       {
//         type: "value",
//         splitLine: {
//           show: true,
//         },
//         axisLine: {
//           show: true, //隐藏X轴轴线
//           symbol: ["none", "arrow"],
//           lineStyle: {
//             color: "#fff",
//             width: 1,
//           },
//         },
//         axisTick: {
//           show: false,
//         },
//         axisLabel: {
//           interval: 0,
//           color: "#fff",
//           fontSize: 15,
//           formatter: (params) => {
//             return params + "";
//           },
//         },
//         splitArea: {
//           show: false,
//         },
//       },
//     ],
//     series: [
//       // {
//       //   name: dataList2.category[1],
//       //   type: "line",
//       //   symbolSize: 4,
//       //   symbol: "circle",
//       //   itemStyle: {
//       //     normal: {
//       //       label: {
//       //         show: false,
//       //         position: "top",
//       //         formatter: (params) => {
//       //           return params.value + "%";
//       //         },
//       //         textStyle: {
//       //           fontSize: 12,
//       //           color: "#fff",
//       //         },
//       //       },
//       //       color: "#33CCFF",
//       //       barBorderRadius: 0,
//       //     },
//       //   },
//       //   lineStyle: {
//       //     normal: {
//       //       width: 4,
//       //       color: {
//       //         type: "linear",
//       //         x: 0,
//       //         y: 0,
//       //         x2: 0,
//       //         y2: 1,
//       //         colorStops: [
//       //           {
//       //             offset: 0,
//       //             color: "#33CCFF", // 0% 处的颜色
//       //           },
//       //           {
//       //             offset: 1,
//       //             color: "#33CCFF", // 100% 处的颜色
//       //           },
//       //         ],
//       //         global: false, // 缺省为 false
//       //       },
//       //     },
//       //   },
//       //   data: dataList2.result[1],
//       // },
//       // {
//       //   name: dataList2.category[2],
//       //   type: "line",
//       //   symbolSize: 4,
//       //   symbol: "circle",
//       //   itemStyle: {
//       //     normal: {
//       //       label: {
//       //         show: false,
//       //         position: "top",
//       //         formatter: (params) => {
//       //           return params.value + "%";
//       //         },
//       //         textStyle: {
//       //           fontSize: 12,
//       //           color: "#fff",
//       //         },
//       //       },
//       //       color: "#9933FF",
//       //       barBorderRadius: 0,
//       //     },
//       //   },
//       //   lineStyle: {
//       //     normal: {
//       //       width: 4,
//       //       color: {
//       //         type: "linear",
//       //         x: 0,
//       //         y: 0,
//       //         x2: 0,
//       //         y2: 1,
//       //         colorStops: [
//       //           {
//       //             offset: 0,
//       //             color: "#9933FF", // 0% 处的颜色
//       //           },
//       //           {
//       //             offset: 1,
//       //             color: "#9933FF", // 100% 处的颜色
//       //           },
//       //         ],
//       //         global: false, // 缺省为 false
//       //       },
//       //     },
//       //   },
//       //   data: dataList2.result[2],
//       // },
//     ],
//   };
//   dataList2.category.forEach((item, index) => {
//     option2.series.push({
//       name: dataList2.category[index],
//       type: "line",
//       symbolSize: 4,
//       symbol: "circle",
//       itemStyle: {
//         normal: {
//           label: {
//             show: false,
//             position: "top",
//             formatter: (params) => {
//               return params.value + "%";
//             },
//             textStyle: {
//               fontSize: 12,
//               color: "#fff",
//             },
//           },
//           color: dataList2.colors[index],
//           barBorderRadius: 0,
//         },
//       },
//       lineStyle: {
//         normal: {
//           width: 4,
//           color: {
//             type: "linear",
//             x: 0,
//             y: 0,
//             x2: 0,
//             y2: 1,
//             colorStops: [
//               {
//                 offset: 0,
//                 color: dataList2.colors[index], // 0% 处的颜色
//               },

//               {
//                 offset: 1,
//                 color: dataList2.colors[index], // 100% 处的颜色
//               },
//             ],
//             global: false, // 缺省为 false
//           },
//         },
//       },
//       data: dataList2.result[index],
//     });
//   });
//   myChart2.setOption(option2);

//   var count = 0;

//   var dataLength = dataList2.result[0].length;
//   function playPrevious() {
//     myChart2.dispatchAction({
//       type: "showTip",
//       seriesIndex: 0,
//       dataIndex: count % dataLength,
//     });
//     count++;
//   }
//   setInterval(playPrevious, 2000);

//   // myChart2.setOption(option2);

//   //options && myChart.setOption(options);
//   //跟随屏幕一起缩放
//   window.addEventListener("resize", () => {
//     myChart2.resize();
//   });
// })();
